<template>
  <div class="swiperBox" >
    <!--
    :autoplay="{ autoplay:true,delay: 3000,
          pauseOnMouseEnter: true,
          disableOnInteraction: false }"
    -->
      <swiper ref="swiper" id="swiper"
        :slides-per-view="1"
        :scrollbar="{ draggable: true }"
        :all-slides-visible="true"
        :allow-touch-move="true"
        :loop="true"
        :pagination="{
          el: '.swiper-pagination'
        }"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide v-for="(item,index) in swiperListBig" :key="index">
          <img class="swiperImg" :src="item" :alt="metaData.seoDescription" :title="metaData.seoDescription" @click="enterSwiper(index)">
          </img>
          
        </swiper-slide>
        <div class="swiper-pagination">
          <div class="swiperPage">
            <div class="pageItem" v-for="(item,ind) in swiperListBig"  @click="toSwiper(ind)">{{ ind+1 }}</div>
          </div>
        </div>
        <el-button class="leftBtn" type="danger" circle @click="toPrev"><div class="iconfont youxia leftIcon"></div></el-button>
        <el-button class="rightBtn" type="danger" icon="rightBtn" circle @click="toNext"><div class="iconfont youshang rightIcon"></div></el-button>
        
      </swiper>
      
      <!-- <el-carousel motion-blur indicator-position="outside" :interval="3000" arrow="hover" height="410" pause-on-hover>
        <el-carousel-item v-for="(item,index) in swiperListBig" :key="item" :label="  index  ">
          <template #default>
            <el-image :alt="(index==0?'玻璃钢管道':'玻璃钢化粪池')+'-'+'新盛合环保设备'"
                :fit="'contain'" lazy loading="lazy" class="carouselImg" @click="enterSwiper(item)"
                :src="item"
                :preview-src-list="swiperListBig"
                :initial-index="index" :hide-on-click-modal="true">

                <template #placeholder>
                  <EmptyImg :width="'410px'" :height="'410px'" />
                  
                </template>

            </el-image>
            </img>
          </template>
        </el-carousel-item>
    </el-carousel> -->
  </div>
</template>


<script setup>
//这里如果指定lang="ts" 则在声明参数时必须限定类型，否则报错 let swiperListBig: any = ref([])
  import { throwError } from 'element-plus/es/utils/error.mjs';
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import {  Navigation,Pagination,Scrollbar,A11y, Autoplay } from 'swiper/modules'
  import Tool from '@/utils/tools'

  defineComponent({
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      return {
        onSwiper,
        onSlideChange,
        // Pagination:{
        //   clickable:true,
        //   renderBullet(index:any, className:any) {
        //     return '<span class="' + className + '">' + (index + 1) + "</span>";
        //   },
        // },

        modules: [Navigation, Pagination, Scrollbar, A11y,Autoplay],
      }
    }
  })

  let defSwiper=null
  let defIndex=0
  let defTimer=null
  function enterSwiper(e){
    console.log("swiper",e);
    switch(e){
      case 0:
        // console.log("玻璃钢管道");
        break;
      case 1:
        // console.log("玻璃钢化粪池");
        break;
      case 2:
        // console.log("玻璃钢净化塔");
        break;
      case 3:
        // console.log("玻璃钢冷却塔");
        break;
      default:
        // console.log("anywhere");
    }
  }
  function toSwiper(index){
    defSwiper.slideTo(index)
    // console.log("toSwiper",defSwiper);
  }
  const onSwiper = (swiper) => {
    // console.log("on---",swiper);
    defSwiper=swiper
    
  };
  const onSlideChange = (e) => {
    // console.log('slide change',e.realIndex);
    defIndex=e.realIndex || 0
    setTimeout(()=>{
      let classes=document.querySelectorAll('.pageItem')
      // console.log("所有uitem：",classes);
      for(let i=0;i<classes.length;i++){
        if(i==e.realIndex){
          Tool.addClass(classes[i],'itemActive')
        }else{
          Tool.removeClass(classes[i],'itemActive')
        }
      }
      swiperChange()
    },0)
  };

  const swiperChange=(index)=>{
    clearInterval(defTimer)
    defTimer=setInterval(()=>{
      defSwiper.slideNext()
    },5000)
    mouseEvent()
  }

  const mouseEvent=()=>{
    const element=document.getElementById('swiper')
    if(element){
        element.addEventListener('mouseenter',()=>{
        // console.log("鼠标进入");
        clearInterval(defTimer)
      })
      element.addEventListener('mouseleave',()=>{
        // console.log("鼠标离开");
        clearInterval(defTimer)
        defTimer=setInterval(()=>{
          defSwiper.slideNext()
        },5000)
      })
    }
    
  }

  /** 自定义按钮 */
  function toPrev(){
    defSwiper.slidePrev();
  }

  function toNext(){
    defSwiper.slideNext();
  }

  let swiperListBig = ref([])
  let swiperListSmall = ref([])
  let metaData = ref({})

  let {data,pending,status,error,refresh}= await GetMainCarouselList()
  if(process.server && error.value){
    throwError((error.value?.data,error.value?.data.error+': '+error.value?.data.status),'页面加载失败，请联系客服！')
  }

  if(data.value?.length>0){
    data.value.forEach((item) => {
      if(item.name.indexOf('轮播图')!=-1){
        swiperListBig.value = item.picList
        swiperListSmall.value = item.miniPicList
        metaData.value = item
      }
    })
    
  
    // localStorage.setItem('productTypes', JSON.stringify(productTypes.value) )
    // console.log("轮播：", swiperListBig)
  }

</script>

<style lang="scss" scoped>
  .swiperBox {
  position: relative;
  transition: height 0.3s ease-in-out;
  width: 100%;
  height: 100%;
  z-index: 0;
  .swiper{
    width: 100%;
    height: 100%;
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33;/* 两种都可以 */
  }
  .swiperImg{
    width: 100%;
    height: auto;
  }
  .swiper-pagination{
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 3%;
    display: flex;
    justify-content: center;
    .swiperPage{
      width: 7%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .pageItem{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: rgba($color: #fff, $alpha: .2);
        box-shadow: inset 0 0 10px rgba($color: #fff, $alpha: 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        transition: 1s;
        cursor: pointer;
        &:hover{
          color: #fff;
          background-color: rgba($color: rgb(31, 119, 173), $alpha: 1);
          box-shadow: inset 0 0 10px rgba($color: #548ee6, $alpha: 0.5);
        }
      }
      
    }
  }
  
  .itemActive{
    color: #fff !important;
    background-color: rgba($color: rgb(31, 119, 173), $alpha: 1) !important;
    box-shadow: inset 0 0 10px rgba($color: #548ee6, $alpha: 0.5) !important;
  }
  .leftBtn{
    position: absolute;
      left: 20px;
      top: 42%;
      z-index: 1;
      background-color: rgba(255,255,255,.1);
      box-shadow: inset 0 0 10px rgba($color: #fff, $alpha: 0.5);
      border: unset;
      width: 50px;
      height: 50px;

      :hover{
        
        .leftIcon{
          color: rgba($color: #98cffc, $alpha: .8);
          
        }
      }
      .leftIcon{
        transform: rotate(135deg);
        color: rgba($color: #fff, $alpha: .8);
        font-size: 26px;
        margin-left: 8px;
        transition: 1s;
      }

    }
  .rightBtn{
    position: absolute;
    top: 42%;
    right: 20px;
    z-index: 1;
    background-color: rgba(255,255,255,.1);
    box-shadow: inset 0 0 10px rgba($color: #fff, $alpha: 0.5);
    border: unset;
    width: 50px;
    height: 50px;
    :hover{
      .rightIcon{
        color: rgba($color: #98cffc, $alpha: .8);
      }
    }
    .rightIcon{
      transform: rotate(45deg);
      color: rgba($color: #fff, $alpha: .8);
      font-size: 26px;
      margin-right: 8px;
      transition: 1s;
    }
  }

  
  
}
</style>